<template>
    <div class="home-swipe">
       <!-- <h4>1234</h4> -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in bannerData" :key="item.bannerId">
                <!-- {{item.bannerId}} -->
                <!-- <img :src="item.picUrl" alert=""> -->
                <van-image :src="item.pic" lazy-load radius="10" />
            </van-swipe-item>
        </van-swipe>
    </div>
</template>

<script>
import { Toast } from 'vant'
// import axios from "axios"
export default {
    data() {
        return {
            bannerData: []
        };
    },
    methods: {
        getBanner() {
            this.$request('get', '/banner?type=2')
                .then(res => {
                    
                    // if (res.result == 200) {
                        this.bannerData = res.banners
                        console.log( this.bannerData)
                    // }
                })
        },
        onSearch(val) {
            Toast(val);
        },
        onFocus() {
            // Toast("搜索框获得焦点");
        },
    },
    created() {
        //页面还没哟渲染，目前还不了解网页中有哪些元素。。。获取“home-swipe”是不可以
        this.getBanner();//由于是网络请求，有延迟，所以不管getBanner方法中是否操作了template中的元素，都可以再次调用
    },
    mounted() {
        //页面已完成渲染，知道有哪些网页元素...获取“home-swipe”是可以的
        //this。getBanner();
    }
}
</script>

<style scoped>
/* .my-swipe .van-swipe-item img {
    width: 100%;
} */
.home-swipe {
    margin: 0 0.3rem;
}
</style>